import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"; //引入类库jquery
function getdata() {
    let sid = location.search.substring(1).split('=')[1];
    if (!sid) { //如果没有传入sid  默认sid=1
        sid = 1;
    }
    $.ajax({
        url: 'http://10.31.163.77/changhong/php/detail.php',
        data: {
            sid: sid
        },
        dataType: 'json', //json对象格式
        success: function(data) { //data:当前sid返回的数据，对象格式。

            $('#spic img').attr('src', data.url); //attr():jquery下面读写标签自定义和默认属性的方法。
            $('#bpic').attr('src', data.url);
            $('.loadtitle').html(data.title);
            $('.loadpcp').html(data.price);

            //渲染小图
            let picarr = data.picurls.split(',')
            let str = '';
            $.each(picarr, function(index, value) {
                str += `
                        <li
                            <img src="${value}"/>
                        </li>
                    `;
            });
            $('#list ul').html(str);
            //实现放大镜效果
            //比例：小图/大图 = 小放/大放
            //求小放的尺寸
            //求得比例，大图根据比例进行移动。
            const wrap = $('.wrap') //放大镜的包含框
            const spic = $('#spic') //小图片
            const sf = $('#sf') //小放大镜
            const bf = $('#bf') //大放大镜
            const bpic = $('#bpic') //大图片
            spic.hover(function() {
                sf.css({ visibility: 'visible' });
                bf.css({ visibility: 'visible' });

                //求小放的尺寸和这个比例
                //width():jquery下面的方法获取内容宽高
                //innerWidth():jquery下面的方法获取内容宽高+padding
                //outerWidth():jquery下面的方法获取盒模型的宽高(内容宽高+padding+border)
                //outerWidth(true):jquery下面的方法获取盒模型的宽高(内容宽高+padding+border+margin)
                sf.css({
                    width: spic.outerWidth() * bf.outerWidth() / bpic.outerWidth(),
                    height: spic.outerHeight() * bf.outerHeight() / bpic.outerHeight()
                });
                //求出放大比例
                let bili = bpic.outerWidth() / spic.outerWidth(); //因为是放大结果>1

                //鼠标移动，小放跟随鼠标移动
                spic.on('mousemove', function(ev) {
                    //注意：鼠标的位置是以文档为基准，定位以父级为基准，减去warp的位置
                    let l = ev.pageX - wrap.offset().left - sf.outerWidth() / 2
                    let t = ev.pageY - wrap.offset().top - sf.outerHeight() / 2
                    if (l <= 0) {
                        l = 0;
                    } else if (l >= spic.outerWidth() - sf.outerWidth()) {
                        l = spic.outerWidth() - sf.outerWidth()
                    }

                    if (t <= 0) {
                        t = 0;
                    } else if (t >= spic.outerHeight() - sf.outerHeight()) {
                        t = spic.outerHeight() - sf.outerHeight()
                    }
                    //小放移动
                    sf.css({
                        left: l, //jquery获取鼠标位置pageX,pageY
                        top: t
                    });
                    //大图移动
                    bpic.css({
                        left: -l * bili,
                        top: -t * bili
                    });
                });
            }, function() {
                sf.css({ visibility: 'hidden' });
                bf.css({ visibility: 'hidden' });
            });
        }
    })
}
let sid = null;
let arrsid = []; //编号
let arrnum = []; //数量 注意：编号和数量要一一对应
function getlocal() {
    if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) { //假设本地存储的key值
        arrsid = localStorage.getItem('localsid').split(',') //把假设的值 存到空的数组里面
        arrnum = localStorage.getItem('localnum').split(',')
    } else {
        arrsid = []
        arrnum = []
    }
}

//加入购物车
function AddtoCart() { //本地存储数量和编号
    $('.serve-box2 .shoppingbnt').on('click', function() { //给加入购物车按钮添加点击事件。
        //判断一次还是多次！
        getlocal();
        if (arrsid.includes(sid)) {
            alert('买过乐')
        } else { //第一次，直接追加
            arrsid.push(sid); //追加sid
            localStorage.setItem('localsid', arrsid); //这里的key值要跟前面假设的对应

            arrnum.push($('.serve-box2 input').val());
            localStorage.setItem('localnum', arrnum);

        }
    })
}

export {
    getdata,
    AddtoCart
}